<template>
  <div class="production-container">
    <div class="info-item" style="font-size: 16px">
      <span>{{ deviceName }}&nbsp;</span>
    </div>

    <div class="guanzi curved-bg" :style="{ backgroundColor: color }">
      <!-- 罐号 -->
      <div class="product_name">{{ productName }}&nbsp;</div>

      <!-- 时间 -->
      <div class="time">{{ productionTime }}&nbsp;</div>
      <!-- PWO： -->
      <div class="info-item red_style" style="margin: 5px 0">
        <div v-if="orderNumber">
          <span class="tt_style">PWO：</span>
          <span>{{ orderNumber }} </span>
        </div>
        &nbsp;
      </div>
      <!-- PIC -->
      <div class="info-item">
        <div v-if="operator">
          <span class="tt_style">PIC：</span>
          <span class="red_style">{{ operator }} </span>
        </div>
        &nbsp;
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  productionTime: {
    type: String,
    default: "",
  },
  deviceName: {
    type: String,
    default: "",
  },
  productName: {
    type: String,
    default: "",
  },
  orderNumber: {
    type: String,
    default: "",
  },
  operator: {
    type: String,
    default: "",
  },
  color: {
    type: String,
    default: "#ffffff",
  },
});
</script>

<style scoped>
.production-container {
  width: 9rem;
  height: 90%;
  padding: 10px;
  margin-bottom: 5px;
  background: #c6daec;
  border-radius: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.production-container:hover {
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(2px);
}
.info-item {
  display: flex;
  justify-content: center;
  /* padding: 6px 5px; */
  /* border-radius: 2px; */
  font-size: 12px;
  /* text-align: center; */
  /* color: #1d1e1f; */
  font-weight: bold;
  width: 100%;
  /* height: 5%; */
}

.time {
  display: flex;
  justify-content: center;
  /* font-size: 12px; */
  font-weight: bold;
  width: 100%;
  color: red;
}
.red_style {
  color: red;
}
.guanzi {
  position: relative;
  color: #010311;
  padding: 10px 2px;
  margin: 5px 0;
  height: 8rem;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  z-index: 1;
  background-color: #dddddd;
  border-radius: 0 0 25px 25px;
}
.product_name {
  margin-bottom: 20px;
  font-size: 14px;
  color: #666;
}
.tt_style {
  color: #444;
}
/* .curved-bg::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: -0%;
  width: 100%;
  height: 40px;
  background: inherit;
  border-radius: 70%;
  z-index: -1;
} */
</style>
